<template>
  <div class="box">
    <h3>Child</h3>
    <!-- <div @click="msg +='燕子'">msg: {{ msg }}</div> -->
    <div @click="changeMsg">msg: {{ msg }}</div>
    <div @click="changeName">userinfo.name: {{ userinfo.name }}</div>
    <div @click="changeHandler">userinfo.age: {{ userinfo.age }}</div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'


// 二 TS写法
const props = defineProps<{
  msg: string,
  userinfo: {
    name: string,
    age: number,
  },
  changeUserinfo: () => void
}>()

const changeMsg = () => {
  // props.msg += '狗子'  //基本数据类型不能修改
  
}

const changeName = () => {
  props.userinfo.name += '爬'
  
  // props.userinfo = reactive({ //不能改地址
  //   name: '葛二蛋',
  //   age: 66
  // })
}

const changeHandler = () => {
  props.changeUserinfo()
}


// 一、  不适用TS写法
// 1.数组形式
// const props = defineProps(['msg'])
//2.对象形式
// const props = defineProps({
//   msg:String
// })
//3.配置对象
// const props = defineProps({
//   msg: {
//     type: String,
//     required: true,
//     default: 'qwer' //引用数据类型（对象、数组、函数）默认值需要写成函数返回值形式
//   }
// })
</script>
